<template>
	<div>
		<div class="flex justify_content_between align_items_center  content-wrapper p_lr_20 m_b_20">
			<div>
				<h2>研发平台</h2>
			</div>
			<div>
				<Language></Language>
			</div>
		</div>

		<div  class="content-wrapper p_20">
			<div class="back">
				<!-- 研发中心 -->
				<div class="d1" style="top:111px;left:303px" @click="edit('dev_0')">
					<div class="m_r_20" style="top:24px;left:31px">
						<img v-if="tableData.dev_0" :src="imgURL + tableData.dev_0.value.img_url" alt="" width="100%" style="border-radius: 50%;">
					</div>
					<div style="top:67px;left:261px">
						<h2 class="m_t_10 m_b_10" v-if="tableData.dev_0">{{tableData.dev_0.value.title}}</h2>
						<p v-if="tableData.dev_0">{{tableData.dev_0.value.content}}</p>
					</div>
				</div>
				
				<div class="d2" style="top:332px;left:305px;text-align: center;" @click="edit('dev_1')" >
					<img :src="imgURL + tableData.dev_1.value.img_url" alt="" height="40%">
					<h2 class="m_t_10 m_b_10">{{tableData.dev_1.value.title}}</h2>
					<p>{{tableData.dev_1.value.content}}</p>
				</div>
				<div class="d2" style="top:332px;left:817px;text-align: center;" @click="edit('dev_2')" >
					<img :src="imgURL + tableData.dev_2.value.img_url" alt="" height="40%">
					<h2 class="m_t_10 m_b_10">{{tableData.dev_2.value.title}}</h2>
					<p>{{tableData.dev_2.value.content}}</p>
				</div>
				<!-- 技术平台 -->
				<div class="d3" style="top:779px;left:248px" @click="editContent('dev_3','c')">{{tableData.dev_3.value.content}}</div>
				
				
				<div class="d4 p_0" style="top:842px;left:339px" @click="editContent('dev_4','a')">
					<h3 class="m_t_10 m_b_10" style="padding-left:32px">{{tableData.dev_4.value.title}}</h3>
					<div class="p_20 w-100">
						<p v-for="(item,index) in tableData.dev_4.value.text" :key="index" class="m_t_10 m_b_10 p_l_20">{{item}}</p>
					</div>
				</div>
				<div class="d5" style="top:842px;left:834px" @click="editContent('dev_5','a')">
					<h3 class="m_t_10 m_b_10" style="padding-left:32px">{{tableData.dev_5.value.title}}</h3>
					<div class="p_20 w-100">
						<p v-for="(item,index) in tableData.dev_5.value.text" :key="index" class="m_t_10 m_b_10 p_l_20">{{item}}</p>
					</div>
				</div>
				
				
				<div class="d6" style="top:1028px;left:338px" @click="editContent('dev_6','a')">
					<h3 class="m_t_10 m_b_10" style="padding-left:32px">{{tableData.dev_6.value.title}}</h3>
					<div class="p_20 w-100">
						<p v-for="(item,index) in tableData.dev_6.value.text" :key="index" class="m_t_10 m_b_10 p_l_20">{{item}}</p>
					</div>
				</div>
				<div class="d7" style="top:1028px;left:891px" @click="editContent('dev_7','a')">
					<h3 class="m_t_10 m_b_10" style="padding-left:32px">{{tableData.dev_7.value.title}}</h3>
					<div class="p_20 w-100">
						<p v-for="(item,index) in tableData.dev_7.value.text" :key="index" class="m_t_10 m_b_10 p_l_20">{{item}}</p>
					</div>
				</div>
				
				
				<div class="d8 flex justify_content_center align_items_center" style="top:1229px;left:470px" @click="editContent('dev_8','c')">{{tableData.dev_8.value.content}}</div>
				<div class="d9 flex justify_content_center align_items_center" style="top:1226px;left:834px" @click="editContent('dev_9','c')">{{tableData.dev_9.value.content}}</div>
				<div class="d10 flex justify_content_center align_items_center" style="top:1296px;left:632px" @click="editContent('dev_10','c')">{{tableData.dev_10.value.content}}</div>
				
				
				<div class="d11 flex justify_content_center align_items_center" style="top:975px;left:627px" @click="editContent('dev_11')">
					<div class="p_20 w-100" v-if="tableData.dev_11">
						<h2 v-for="(item,index) in tableData.dev_11.value.text" :key="index" class="m_t_10 m_b_10 text_center">{{item}}</h2>
					</div>
				</div>
				
				<!-- 研发中心 -->
				
				<div class="d12" style="top:1530px;left:276px" @click="editContent('dev_12','c')">{{tableData.dev_12.value.content}}</div>
				
				
				<div class="d13 flex justify_content_center align_items_center" style="top:1614px;left:897px" @click="editContent('dev_13','c')">{{tableData.dev_13.value.content}}</div>
				<div class="d13 flex justify_content_center align_items_center" style="top:1692px;left:957px" @click="editContent('dev_14','c')">{{tableData.dev_14.value.content}}</div>
				<div class="d13 flex justify_content_center align_items_center" style="top:1773px;left:901px" @click="editContent('dev_15','c')">{{tableData.dev_15.value.content}}</div>
				<div class="d13 flex justify_content_center align_items_center" style="top:1850px;left:957px" @click="editContent('dev_16','c')">{{tableData.dev_16.value.content}}</div>
				<div class="d13 flex justify_content_center align_items_center" style="top:1929px;left:901px" @click="editContent('dev_17','c')">{{tableData.dev_17.value.content}}</div>
				<div class="d13 flex justify_content_center align_items_center" style="top:2007px;left:957px" @click="editContent('dev_18','c')">{{tableData.dev_18.value.content}}</div>
				<div class="d13 flex justify_content_center align_items_center" style="top:2086px;left:897px" @click="editContent('dev_19','c')">{{tableData.dev_19.value.content}}</div>
			</div>
			<Edit ref="Edit"></Edit>
		
		<!-- 编辑内容 -->
		<el-dialog :visible.sync="isShow1" title="编辑" :close-on-click-modal="false" @close="closeDialog">
			<!-- <el-divider></el-divider> -->
			<el-form label-width="80px">
				
				
				<el-form-item label="标题" v-if="c != 'c'&&c == 'a'">
					<el-input v-model="form.title" class="w_400"></el-input>
				</el-form-item>
				<el-form-item label="内容" v-if="c != 'c'">
					<div v-for="(item,index) in form.text" :key="index">
						<el-input v-model="form.text[index]" class="w_400 m_b_10 m_r_10"></el-input>
						<el-button size="small" icon="el-icon-minus" @click="delText" v-if="index == form.text.length-1"></el-button>
					</div>
					<el-button size="small" icon="el-icon-plus" @click="addText"></el-button>
				</el-form-item>
				<el-form-item label="内容"  v-if="c == 'c'">
					<el-input v-model="form.content" class="w_400" type="textarea" :rows="6"></el-input>
				</el-form-item>
				
				
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
		
		
		</div>
	</div>
</template>
<script type="text/javascript">
	import methods from './method'
	import Edit from './edit/edit'

	export default {
		data() {
			return {
				tableData: {
					dev_0:{value:{}},
					dev_1:{value:{}},
					dev_2:{value:{}},
					dev_3:{value:{}},
					dev_4:{value:{}},
					dev_5:{value:{}},
					dev_6:{value:{}},
					dev_7:{value:{}},
					dev_8:{value:{}},
					dev_9:{value:{}},
					dev_10:{value:{}},
					dev_11:{value:{}},
					dev_12:{value:{}},
					dev_13:{value:{}},
					dev_14:{value:{}},
				}, //列表数据
				
				
				c:'',
				key1:'',//key
				isShow1:false,//标题内容编辑
				form:{//form
					title:'',
					text:[''],
					content:''
				}
				
			}
		},
		methods: methods,
		components:{
			Edit
		},
		mounted() {
			this.getTableData()
		}
	}
</script>

<style scoped>
	.back {
		height: 2180px;
		width: 1500px;
		background: url(../../../assets/imgs/dev.jpg) no-repeat;
		background-size: contain;
		position: relative;
	}
	
	.back div {
		position: absolute;
		/* color:#fff; */
		padding: 5px;
		box-sizing: border-box;
		/* border: 1px solid #F00; */
	}
	.back .d3,
	.back .d4,
	.back .d5,
	.back .d6,
	.back .d7,
	.back .d8,
	.back .d9,
	.back .d10,
	.back .d11 {
		color:#fff;
	}
	
	.back .d1 {
		width: 864px;
		height: 214px;
	}
	.back .d1 div:first-child {
		width: 175px;
		height: 175px;
		border-radius: 50%;
	}
	
	.back .d1 div:last-child {
		width: 584px;
		height: 110px;
	}
	
	
	.back .d2 {
		width: 349px;
		height: 314px;
	}
	
	
	.back .d3 {
		width: 738px;
		height: 28px;
	}
	
	
	.back .d4 {
		width: 322px;
		height: 145px;
	}
	.back .d5 {
		width: 303px;
		height: 145px;
	}
	
	
	.back .d6 {
		width: 260px;
		height: 167px;
	}
	
	.back .d7 {
		width: 246px;
		height: 167px;
	}
	
	.back .d8 {
		width: 190px;
		height: 41px;
	}
	
	.back .d9 {
		width: 207px;
		height: 41px;
	}
	
	.back .d10 {
		width: 226px;
		height: 57px;
	}
	
	
	.back .d11 {
		width: 240px;
		height: 240px;
		border-radius: 50%;
	}
	
	
	
	.back .d12 {
		width: 868px;
		height: 51px;
	}
	
	
	.back .d13 {
		width: 153px;
		height: 51px;
	}
</style>